<template>
  <div id="app">
    <router-view></router-view>
    <footer @click="active">
      <section>
         <router-link to="/home" class="fir_home"><span class="icon">&#xe604;</span>首页</router-link></section>
        <section>
          <router-link to="/classify"><span class="icon">&#xe6ee;</span>分类</router-link></section>
        <section>
          <router-link to="/cart"><span class="icon">&#xe629;</span>购物车</router-link></section>
        <section>
          <router-link to="/mine"><span class="icon">&#xe61d;</span>我的</router-link></section>    
    </footer> 
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {

    }
  },
  methods: {
    active(e) {
        $( e.target).attr('class', 'footer_active')
    }
  }
}
</script>

<style>
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .35rem;
}
.fir_home{
  color: #ff6b82;
}
.icon{
  font-family: 'iconfont';
  display: block;
  text-align: center;
  font-size: .6rem; 
  margin-bottom: .1rem;
}
.footer_active{
  color: #ff6b82;
}
.dir_active{
  color: #fff;
}
@font-face {
  font-family: 'iconfont';  /* project id 283727 */
  src: url('//at.alicdn.com/t/font_dq7ow33on93blnmi.eot');
  src: url('//at.alicdn.com/t/font_dq7ow33on93blnmi.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_dq7ow33on93blnmi.woff') format('woff'),
  url('//at.alicdn.com/t/font_dq7ow33on93blnmi.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_dq7ow33on93blnmi.svg#iconfont') format('svg');
}
</style>
 